<!-- 自定义指令 -->
<template>
    <div v-move="{ background: 'green' }" style="width: 300px;height: 300px;">自定义标签</div>
    <div class="btns">
        <button v-has-show="'shop:create'">创建</button>
        <button v-has-show="'shop:edit'">编辑</button>
        <button v-has-show="'shop:delete'">删除</button>
    </div>
</template>

<script setup lang='ts'>
import { Directive, DirectiveBinding } from 'vue';

// import { ref, reactive } from 'vue'
type Dir = {
    background: string
}
const vMove: Directive = {
    // 元素初始化时
    created() {
        console.log('========>created');
    },
    // 指令绑定到元素后调用一次
    beforeMount(...args: Array<any>) {
        console.log('========>beforeMount');
    },
    // 元素插入父级dom时调用
    mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
        console.log('========>mounted');
        el.style.background = dir.value.background;

    },
    // 元素被更新前调用
    beforeUpdate() {
        console.log('=======>beforeUpdate');
    },
    // 元素被更是后调用
    updated() {
        console.log('========>updated');
    },
    // 卸载前调用
    beforeUnmount() {
        console.log('========>beforeUnmount');
    },
    // 卸载后调用
    unmounted() {
        console.log('========>unmounted');
    }
}


// 简写标签
// 通过当前用户名+标签内传值确定数据(当前值)  permission为模拟后端返回数据(合法值) 两者匹配予以展示
localStorage.setItem('userId', 'xiaoman-zs')
const permission = [
    'xiaoman-zs:shop:edit',
    'xiaoman-zs:shop:create',
    'xiaoman-zs:shop:delete'
]
const userId = localStorage.getItem('userId') as string
const vHasShow: Directive<HTMLElement, string> = (el, bingding) => {
    console.log(el, bingding);
    if (!permission.includes(userId + ':' + bingding.value)) {
        el.style.display = 'none'
    }
}
</script>

<style scoped lang="scss">
.a {
    background-color: aqua;
}

.b {
    background-color: chartreuse;
}
</style>